<template>
  <div class="user">
    <user-search ref="searchRef" @query-click="handleQueryClick" @reset-click="handleResetClick" />
    <user-content ref="contentRef" @create-btn-click="handleCreateBtnClick" @edit-btn-click="handleEditBtnClick" @ok="handleOk" />
    <user-modal ref="modalRef" @ok="handleOk"></user-modal>
  </div>
</template>

<script setup lang="ts">
import UserSearch from './c-cpns/user-search.vue'
import UserContent from './c-cpns/user-content.vue'
import UserModal from './c-cpns/user-modal.vue'
import { ref } from 'vue'

const searchRef = ref<InstanceType<typeof UserSearch>>()
const contentRef = ref<InstanceType<typeof UserContent>>()
const modalRef = ref<InstanceType<typeof UserModal>>()

function handleQueryClick(formData: any) {
  contentRef.value?.fetchUserListData(formData)
}

function handleResetClick() {
  contentRef.value?.fetchUserListData()
}

function handleCreateBtnClick() {
  modalRef.value?.setModalVisible(false)
}

function handleEditBtnClick(itemData: any) {
   modalRef.value?.setModalVisible(true, itemData)
}

function handleOk() {
  searchRef.value?.handleQueryClick()
}
</script>

<style lang="less" scoped>
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
